<%var csstpl = {%>
<link rel="stylesheet" href="${basepath}/gexinadmin/icont/iconfont.css"
	media="all">
<style>
.icons-list i {
	cursor: pointer;
}

.icons-list i {
	cursor: pointer;
}

.toggle-btn {
	cursor: pointer;
}

.hide_sub:before {
	content: "\e602";
}

.show_sub:before {
	content: "\e61a";
}
table th,
table td { padding: 5px !important; }
.NullPadding { padding:0px !important; }
.NullPadding > table { width:100%; }
.NullPadding > table.tb1 td { border-top:none; border-bottom:none; }
.NullPadding > table td:first-child { border-left:none; }
.NullPadding > table td:last-child { border-right:none; }
.td1 { min-width:180px !important; width:180px; }
.td2 { min-width:80px !important; width:60px; text-align:center; }
.td3 { min-width:200px !important; width:200px; }
.td4 { min-width:150px !important; width:150px; }
.td6 { min-width:30px !important; width:30px; }
.td7 { min-width:230px !important; width:230px; }

.NullPadding .td1 i { margin-left:7px; }
.NullPadding .twolevel .td1 i { margin-left:0; }
.NullPadding .threelevel .td1 span { margin-left:20px; }

</style>
<%};%> <%var jstpl = {%>
<script>
	$(function() {

	})
	var app = new Vue({
		el : "#content",
		data : {
			query : {
				pageNumber : 1,
				pageSize : 10
			},
			data_result : {},
			res_type:null,
			res_sort:""
		},
		created : function() {
			this.loadPage("init")
		},
		methods : {
			loadPage : function(model) { //载入模式有两种  init初始化载入 load分页载入
				if (model == "init") {
					this.query.pageNumber = 1;
				}
				Ajax("/system/role/res/query", this.query, function(d) {
					app.data_result = d.pageData;
					if (d.pageData.firstPage == true) {
						layui.laypage.render({
							elem : 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
							,
							layout : [ 'count', 'prev', 'page', 'next',
									'limit', 'skip' ],
							count : d.pageData.totalRow //数据总数，从服务端得到
							,
							limit : app.query.pageSize,
							jump : function(obj, first) {
								app.query.pageNumber = obj.curr;
								if (app.query.pageSize != obj.limit) {
									app.query.pageSize = obj.limit;
									app.loadPage("init");
									return;
								}
								if (!first) {
									app.loadPage("load");
								}
							}
						});
					}
				})
			},resEdit: function(res) { //编辑资源
				this.res_type=res.type;
				this.res_sort=res.sort;
				if(res.pid==null){
					$("#menu_type").html('<option value="">请选择</option><option  value="1">主模块</option><option value="3">主菜单</option>');
				}else if(res.type==1){
					$("#menu_type").html('<option value="">请选择</option><option  value="1">主模块</option>');
				}else{
					$("#menu_type").html('<option value="">请选择</option><option  value="2">后台功能</option>');
				}
				
				gx.ajax("/system/role/res/info/" + res.id, function(d) {
					for ( var item in d) {
						if (item == "type") {
							$("#menu_type").val(d[item]);
						} else {
							$("input[name='res." + item + "']").val(d[item])
						}
						this.res_sort=d["sort"];
					}
					if ($("#input_addr").val() == "3") {
						$("#div_addr_url").hide();
						$("#input_addr").val("javascript:;");
					} else {
						$("#div_addr_url").show();
					}
					
					$("#menu_type").change();
					form.render('select');
					$('#compose-mail').modal('show')
				})
			},addRes: function(res) {//新增资源
				this.res_sort=null;
				$("#add_saveform")[0].reset();
				$("#res_id").val("");
				$("#res_pid").val("");
				if(res!=undefined){
					if(res.type==undefined){
						$("#menu_type").html('<option value="">请选择</option><option value="1">主模块</option><option value="3">主菜单</option>');
					}else if(res.type==1){
						this.res_type=2;
						$("#menu_type").html('<option value="">请选择</option><option value="2">后台功能</option>');
						$("#compose-mail input[name='res.pid']").val(res.id);
					}else{
						this.res_type=res.type;
						$("#menu_type").html('<option value="">请选择</option><option value="1">主模块</option>');
						$("#compose-mail input[name='res.pid']").val(res.id);
					}
					
					 if(this.res_type!=2){
						 $("#compose-mail input[name='res.css_pid']").val(res.id);
					 }else{
						 $("#compose-mail input[name='res.css_pid']").val(res.pid);
						 $("#compose-mail input[name='res.css_tag']").val(res.css_tag);
					 }
					 
				}else{
					$("#menu_type").html('<option value="">请选择</option><option value="1">主模块</option><option value="3">主菜单</option>');
					this.res_type=null;
				}
				
				if ($("#input_addr").val() == "3") {
					$("#div_addr_url").hide();
					$("#input_addr").val("javascript:;");
				} else {
					$("#div_addr_url").show();
				}
				$('#compose-mail').modal('show');
				
			},delRes: function(res) { //删除
				gx.confirm("你是否确定删除这个资源？", function() {
					gx.ajax('/system/role/res/delete/' + res.id, function(d) {
						if(d.state == true) {
							layer.closeAll();
							app.loadPage("load");
						} else {
							gx.alert(d.msg);
						}
					})
				})
			}/* ,viewLevel: function(item)// 查看列表列表
			{
				item.isShow = !item.isShow;
			} */
		}
	})

	var form = layui.form;

	//监听提交
	form.on('submit(formDemo)', function(data) {
		Ajax('/system/role/res/addsave', data.field, function(d) {
			 if (d.state == true) {
				gx.alerts("保存成功！", function() {
					layer.closeAll();
					$('#compose-mail').modal('hide');
					app.loadPage("load");
					//延迟显示 因为渲染需要时间
					if(app.res_sort!=(data.field["res.sort"])&&app.res_sort!=null){
						window.location.reload();
					}else {
						 setTimeout(function(){
								/* $("table[data-sub='" + data.field["res.pid"]  + "']").toggle();
								$("tr[data-sub='" + data.field["res.pid"] + "']").toggle();
								$("tr[data-sub='" + data.field["res.pid"] + "']").parent().parent().toggle();
								$("td[data-id='"+data.field["res.pid"]+"']").find(".layui-icon").addClass("show_sub"); */
								 $("table[data-sub='" + data.field["res.pid"]  + "']").show();
									$("tr[data-sub='" + data.field["res.pid"] + "']").show();
									$("td[data-id='"+data.field["res.pid"]+"']").find(".layui-icon").addClass("show_sub");
							},500)
					} 
				})
			} else {
				gx.alert(d.msg)
			}
		}) 
	});

	//监听select change 
	form.on('select(select_type)', function(data) {
		var value = data.value
		if (value == "3") {
			$("#div_addr_url").hide();
			$("#input_addr").val("javascript:;");
		} else {
			$("#div_addr_url").show();
		}
	});

	$("#content").on("click","#sel_icon_btn",function(){
		//iframe层
		layer.open({
			type : 2,
			title : null,
			shadeClose : true,
			shade : 0.5,
			area : [ '800px', '80%' ],
			content : '/system/role/res/selectIcon' //iframe的url
		});
	})
	
	//为图标赋值
	function ChooseIcon(str)
	{
		$("#icon_cls").val(str);
		layer.closeAll();
	}
	
	 $(function() {
		$("#content").on("click", ".toggle-twoLevel", function() {
			var id = $(this).data("id");
			$(this).find(".layui-icon").toggleClass("show_sub");
			$("table[data-sub='" + id + "']").toggle();
		})
		
		$("#content").on("click", ".toggle-threeLevel", function() {
			var id = $(this).data("id");
			$(this).find(".layui-icon").toggleClass("show_sub");
			$("tr[data-sub='" + id + "']").toggle();
		})
		
	}) 
	
</script>
<%};%>
<%layout("../layout/_layout_layui.html",{title:"资源管理",jstpl:jstpl,csstpl:csstpl}){
%>
<div class="layui-row" id="content" v-cloak>


	<div class="layui-col-md2 layui-col-md-offset10">
		<%if(resinfo!null!=null){%>
		<button class="layui-btn " onclick="javascript:history.go(-1)">
			<i class="layui-icon">&#xe65c;</i> 返回上一级
		</button>
		<%}%> <a href="#" @click="addRes()" id="addbtn" class="layui-btn"><i
			class="layui-icon">&#xe608;</i> 添加资源</a>
	</div>
	<!-- 内容开始 -->
	<div class="layui-col-md12" style="margin-top: 20px">
		<table class="layui-table ">
			<thead>
				<tr>
					<th class="td1">名称</th>
					<th class="td2">菜单类型</th>
					<th class="td3">描述信息</th>
					<th class="td4">图标</th>
					<th class="td5">资源地址</th>
					<th class="td6">排序</th>
					<th class="td7"></th>
				</tr>
			</thead>
			<tbody v-for="d in data_result.list">
				<tr>
				<td colspan="7" class="NullPadding">
					<table class="tb1">
					<tr class="twolevel">
					<!-- <td class="td1" @click="viewLevel(d)" :data-id="d.id"><i class="layui-icon hide_sub" :class="{'show_sub':d.isShow}" ></i> {{d.name}}</td> -->
					<td class="td1 toggle-twoLevel" :data-id="d.id"><i class="layui-icon hide_sub"></i> {{d.name}}</td>
					<td class="td2" v-if="d.type==3"><span class="layui-badge layui-bg-black">主菜单</span></td>
					<td class="td2" v-else-if="d.type==1"><span class="layui-badge layui-bg-black">主模块</span></td>
					<td class="td2" v-else><span class="layui-badge">子功能模块</span></td>
					
					<td class="td3">{{d.des}}</td>
					<td class="td4"><i v-bind:class="['layui-icon gx-icont '+d.icon_cls]"></i><span style="padding-left: 20px">{{d.icon_cls}}</span></td>
					<td class="">{{d.url}}</td>
					<td class="td6">{{d.sort}}</td>
					<td class="td7">
						<div class="layui-btn-group">
							<button class="layui-btn  layui-btn-sm"
								@click="resEdit(d)">
								<i class="layui-icon">&#xe642;</i>编辑
							</button>
							<button class="layui-btn  layui-btn-sm" @click="delRes(d)">
								<i class="layui-icon">&#xe640;</i>删除</button>
								<button v-if="d.type!=2" class="layui-btn  layui-btn-sm" @click="addRes(d)">
									<i class="layui-icon">&#xe654;</i>添加子资源</button>
						</div>
					</td>
					</tr>
					</table>
					
					<!-- <table v-show="d.isShow" :data-sub="d.id"> -->
					<table :data-sub="d.id" style="display: none;">
						<tbody v-for="t in d.twoLevel">
						<tr>
							<!-- <td class="td1" @click="viewLevel(t)" :data-id="t.id"><i class="layui-icon hide_sub" :class="{'show_sub':t.isShow}" ></i> {{t.name}}</td> -->
							<td class="td1 toggle-threeLevel" :data-id="t.id"><i class="layui-icon hide_sub"></i> {{t.name}}</td>
							<td class="td2" v-if="t.type==3"><span class="layui-badge layui-bg-black">主菜单</span></td>
							<td class="td2" v-else-if="t.type==1"><span class="layui-badge layui-bg-black">主模块</span></td>
							<td class="td2" v-else><span class="layui-badge">子功能模块</span></td>
							<td class="td3">{{t.des}}</td>
							<td class="td4"><i v-bind:class="['layui-icon gx-icont '+t.icon_cls]"></i><span
								style="padding-left: 20px">{{t.icon_cls}}</span></td>
							<td>{{t.url}}</td>
							<td class="td6">{{t.sort}}</td>
							<td class="td7">
									<div class="layui-btn-group">
										<button class="layui-btn  layui-btn-sm" @click="resEdit(t)">
											<i class="layui-icon">&#xe642;</i>编辑
										</button>
										<button class="layui-btn  layui-btn-sm" @click="delRes(t)">
											<i class="layui-icon">&#xe640;</i>删除</button>
										<button v-if="t.type!=2" class="layui-btn  layui-btn-sm" @click="addRes(t)">
											<i class="layui-icon">&#xe654;</i>添加子资源</button>
									</div>
							</td>
						</tr>
						<!-- <tr v-for="v in t.threeLevel" class="threelevel" v-show="t.isShow" :data-sub="t.id"> -->
						<tr v-for="v in t.threeLevel" class="threelevel" :data-sub="t.id" style="display: none;">
							<td class="td1" style="padding-left: 100px;"><span class="layui-badge-dot "></span>
								{{v.name}}</td>
							<td v-if="v.type==3"><span class="layui-badge layui-bg-black">主菜单</span></td>
							<td v-else-if="v.type==1"><span
								class="layui-badge layui-bg-black">主模块</span></td>
							<td v-else><span class="layui-badge">子功能模块</span></td>
							<td>{{v.des}}</td>
							<td><i v-bind:class="['layui-icon gx-icont '+v.icon_cls]"></i><span
								style="padding-left: 20px">{{v.icon_cls}}</span></td>
							<td>{{v.url}}</td>
							<td>{{v.sort}}</td>
							<td>
									<div class="layui-btn-group">
										<button class="layui-btn  layui-btn-sm" @click="resEdit(v)">
											<i class="layui-icon">&#xe642;</i>编辑
										</button>
										<button class="layui-btn  layui-btn-sm" @click="delRes(v)">
											<i class="layui-icon">&#xe640;</i>删除</button>
										<button v-if="v.type!=2" class="layui-btn  layui-btn-sm" @click="addRes(v)">
											<i class="layui-icon">&#xe654;</i>添加子资源</button>
									</div>
							</td>
						</tr>
						</tbody>
					</table>
				</td>
				</tr>
				
			</tbody>
			<tbody id="tbody_body" v-if="data_result.list==0">
				<tr>
					<td colspan="7" style="text-align: center; height: 300px"><h1>没有数据</h1></td>
				</tr>
			</tbody>
		</table>
		<fieldset id="gexin_page" class="layui-elem-field layui-field-title"></fieldset>
	</div>

	<div class="modal fade" id="compose-mail" tabindex="-1" role="dialog"
		aria-hidden="true">
		<form id="add_saveform" class="layui-form form-horizontal ">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">
							添加/修改资源
							<!-- <button class="close" type="button" data-dismiss="modal">&times;</button> -->
						</h4>
					</div>
					<div class="modal-body">
						<!-- 弹出框开始  -->
						<div class="layui-row layui-col-space15">
							<!-- 弹出框开始  -->
							<input type="hidden" id="res_id" name="res.id">

							<div class="layui-form-item">
								<label class="layui-form-label">菜单类型</label>
								<div class="layui-input-block">
									<select class="" id="menu_type" lay-verify="required"
										lay-filter="select_type" name="res.type">
									</select>
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">名称</label>
								<div class="layui-input-block">
									<input class="layui-input" type="text" lay-verify="required"
										　placeholder="请输入资源的名称" name="res.name">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">描述信息</label>
								<div class="layui-input-block">
									<input class="layui-input" type="text" placeholder="请输入描述信息"
										name="res.des">
								</div>
							</div>

							<div class="layui-form-item" id="div_addr_url">
								<label class="layui-form-label">地址</label>
								<div class="layui-input-block">
									<input type="text" id="input_addr" lay-verify="required"
										placeholder="请输入资源地址" data-rule="required" name="res.url"
										class="layui-input">
								</div>
							</div>

							 <input type="hidden" id="res_pid" name="res.pid"> 

							<!--   如果是权限 就不需要图标这些信息  -->

							<div v-if="res_type!=2" class="layui-form-item">
								<label class="layui-form-label">图标<i
									class=""></i></label>
								<div class="layui-input-block ">

									<div class="layui-col-md10">
										<input name="res.icon_cls" type="text"
											placeholder="请参考CSS图标添加" id="icon_cls" class="layui-input">
									</div>
									<div class="layui-col-md1 " style="margin-left: 12px;">
										<button id="sel_icon_btn" type="button" class="layui-btn">选择</button>
									</div>
								</div>
							</div>
							<input  v-else type="hidden" name="res.icon_cls" value="icol-note">

							<div v-if="res_type!=2" class="layui-form-item">
								<label class="layui-form-label">排序</label>
								<div class="layui-input-block">
									<input type="text" lay-verify="required|number" name="res.sort"
										maxlength="3" class="layui-input" >
								</div>
							</div>
							
							<input v-else type="hidden" name="res.sort" value="1">							
                            <input  type="hidden" name="res.css_pid" >
                            <input  type="hidden" name="res.css_tag" >

							<!--  弹出框结束 -->
						</div>
						<!--  弹出框结束 -->
					</div>
					<div class="modal-footer">
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button type="button" class="layui-btn" lay-submit
									lay-filter="formDemo">提交</button>
								<button type="button" data-dismiss="modal"
									class="layui-btn layui-btn-primary">关闭</button>
							</div>
						</div>
					</div>

				</div>
			</div>
		</form>
	</div>
</div>
<%}%>
